import { Tabs } from 'nextra/components'
import BadgeGroup, { UniverTypes } from '@/components/BadgeGroup'

# 评论 / 批注

<BadgeGroup values={[UniverTypes.SHEET]} value={UniverTypes.SHEET} />

评论 / 批注插件提供了对单元格进行评论或者批注的功能。

## 安装

<Tabs items={['pnpm', 'npm']}>
  <Tabs.Tab label="pnpm">
    ```shell
    pnpm add @univerjs/sheets-thread-comment @univerjs/thread-comment-ui
    ```
  </Tabs.Tab>
  <Tabs.Tab label="npm">
    ```shell
    npm install @univerjs/sheets-thread-comment @univerjs/thread-comment-ui
    ```
  </Tabs.Tab>
</Tabs>

## 引入

```typescript
import '@univerjs/thread-comment-ui/lib/index.css';

import { zhCN as ThreadCommentUIEnUS } from '@univerjs/thread-comment-ui';
import { zhCN as SheetsThreadCommentEnUS } from '@univerjs/sheets-thread-comment';
```

## 国际化

```typescript
import { LocaleType, Tools } from '@univerjs/core';
import ThreadCommentUIZhCN from '@univerjs/thread-comment-ui/locale/zh-CN';
import SheetsThreadCommentZhCN from '@univerjs/sheets-thread-comment/locale/zh-CN';

const univer = new Univer({
  theme: defaultTheme,
  locale: LocaleType.ZH_CN,
  locales: {
    [LocaleType.ZH_CN]: Tools.deepMerge(
      ThreadCommentUIZhCN,
      SheetsThreadCommentZhCN
    ),
  },
});
```

## 注册

```typescript
const mockUser = {
  userID: 'mockId',
  name: 'MockUser',
  avatar: '',
  anonymous: false,
  canBindAnonymous: false,
};

class CustomMentionDataService implements IThreadCommentMentionDataService {
  trigger: string = '@';

  async getMentions(search: string) {
    return [
      {
        id: mockUser.userID,
        label: mockUser.name,
        type: 'user',
        icon: mockUser.avatar,
      },
      {
        id: '2',
        label: 'User2',
        type: 'user',
        icon: mockUser.avatar,
      },
    ];
  }
  }

univer.registerPlugin(UniverSheetsThreadCommentPlugin, {
  overrides: [[IThreadCommentMentionDataService, { useClass: CustomMentionDataService }]],
});
```
